import SvgAlertInfo from "components/svg/SvgAlertInfo";
import { AlertProps, getClassName } from "./utils";
import SvgAlertSuccess from "components/svg/SvgAlertSuccess";
import SvgAlertWarning from "components/svg/SvgAlertWarning";
import SvgAlertError from "components/svg/SvgAlertError";

const Alert = (props: AlertProps) => {
  const { info, success, warning, error, caption = 'Alert' } = props;
  const className = getClassName(props);
  const isInfo = Boolean(!success && !warning && !error);
  const isSuccess = Boolean(!info && success && !warning && !error);
  const isWarning = Boolean(!info && !success && warning && !error);
  const isError = Boolean(!info && !success && !warning && error);

  return (
    <div role="alert" className={className}>
      {isInfo && <SvgAlertInfo />}
      {isSuccess && <SvgAlertSuccess />}
      {isWarning && <SvgAlertWarning />}
      {isError && <SvgAlertError />}
      <span>{caption}</span>
    </div>
  );
};

export default Alert;
